<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>管理员登录</title>
<!-- 引入layui的css -->
<link rel="stylesheet" href="/layui/css/layui.css">
<style type="text/css">
	body{
		margin: 0px;
		padding: 0px;
		background-color: #036AD1;
	}
	form{
		width: 400px;
		margin: 200px auto;
		background-color: #FFF;
		padding: 30px;
		border: 1px solid #CDCDCD;
		border-radius: 10px;
	}
	
	h1{
		text-align: center;
		margin-bottom: 25px;
	}
</style>
</head>
<body>

<form class="layui-form">
	<h1>管理员登录</h1>
	<div class="layui-form-item">
	<label class="layui-form-label">用户名</label>
		<div class="layui-input-inline">
			<input type="text" name="username" placeholder="请输入用户名"
				class="layui-input">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">密码</label>
		<div class="layui-input-inline">
		<input type="password" name="password" placeholder="请输入密码" 
			class="layui-input">
		</div>
	</div>
	
	<div class="layui-form-item">
		<div class="layui-input-block">
			<button class="layui-btn" lay-submit lay-filter="login">立即登录</button>
		</div>
	</div>
</form>


<!-- 引入layui的js -->
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript">
	layui.use(['form', 'layer'], function(){
		var form = layui.form,
		layer = layui.layer,
		$ = layui.$;
		
		//表单的提交
		form.on('submit(login)', function(data){
			
			//调用登录接口
			$.ajax({
				url: '/api/admin/login',
				data: data.field,
				type: 'post',
				dataType: 'json',
				success: function(result){
					if(result.code > 0){
						//跳转到主页面
						window.location.href= "/";
					}else{
						layer.msg(result.msg);
					}
				},
				error: function(){
					layer.msg('请求失败');
				}
			});
			
			return false;
		});
	});
</script>
</body>
</html>